<template>
  <wave-flex-box
      direction="column">
    <chat-welcome v-if="aiSessionStore.bubbles.length===0"/>
    <br>
    <BubbleList :list="aiSessionStore.bubbles"
                style="width: 90%;max-height: 80%"/>
    <br>
    <br>
    <br>
    <br>
    <EditorSender
        ref="senderRef"
        style="width: 90%;height: 10%"
        submit-type="enter"
        :loading="aiSessionStore.sendLoading"
        @submit="handleSubmit"/>
  </wave-flex-box>
</template>

<script setup>

import ChatWelcome from "@/views/system/ai/ChatWelcome.vue";
import {EditorSender} from "vue-element-plus-x";

import {ref, onMounted} from 'vue';
import WaveFlexBox from "@/component/WaveFlexBox.vue";
import {aiChatNormalChat} from "@/views/system/ai/js/AiChatRequest.js";
import {AiUtil} from "@/utils/AiUtil.js";

import {useAiSessionStore} from "@/store/AiSessionStore.js";

const aiSessionStore = useAiSessionStore();

const senderRef = ref();

const handleSubmit = (value) => {
  console.log(value)
  let userBubble = AiUtil.buildBubble('user', 'end', value.text, false, false,
      'https://img.ixintu.com/download/jpg/201911/e25b904bc42a74d7d77aed81e66d772c.jpg!con');
  aiSessionStore.bubbles.push(userBubble)
  let aiBubble = AiUtil.buildBubble('ai', 'start', '', true, true,
      'https://img.ixintu.com/download/jpg/201911/e25b904bc42a74d7d77aed81e66d772c.jpg!con');
  aiBubble.typing = false;
  aiSessionStore.bubbles.push(aiBubble)
  aiSessionStore.sendLoading = true;
  aiChatNormalChat(AiUtil.buildAiChatQuery(aiSessionStore.conversionId, value.text)).then(res => {
    console.log(res)
    if (res.success && res.data != null) {
      console.log(66666)
      aiSessionStore.setConversationId(res.data);
    }
  })
}

onMounted(() => {
  //  判断当前是否才开启对话 插入问候语
  if (aiSessionStore.bubbles.length === 0) {
    let userBubble = AiUtil.buildBubble('ai', 'start', '😀我是智能阿威，本站的智能助手' +
        '，我可以回答本站文章相关内容呢，你可以问我相关问题，(*^_^*)！！！', false, false,
        'https://img.ixintu.com/download/jpg/201911/e25b904bc42a74d7d77aed81e66d772c.jpg!con');
    aiSessionStore.bubbles.push(userBubble)
  }
})
</script>

<style scoped>

</style>